<section ng-controller="ConstraintsController">

    <h1><small>Constraints:</small></h1>

    <div class="row">
        <div class="list-group">
            <div class="list-group-item">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="addTopicConstraints()">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </div>
                <h4>
                    Topic constraints
                </h4>
            </div>
            <a class="list-group-item" ng-repeat="item in topicConstraints" ng-click="edit(item)">
                <small>{{$index + 1}}</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <strong>{{item.topicName}}</strong>
                <div class="pull-right">
                    <span class="label label-info">consumers number: {{ item.consumersNumber }}</span>
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="list-group">
            <div class="list-group-item">
                <div class="pull-right">
                    <button class="btn btn-primary" ng-click="addSubscriptionConstraints()">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </div>
                <h4>
                    Subscription constraints
                </h4>
            </div>
            <a class="list-group-item" ng-repeat="item in subscriptionConstraints" ng-click="edit(item)">
                <small>{{$index + 1}}</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <strong>{{item.subscriptionName}}</strong>
                <div class="pull-right">
                    <span class="label label-info">consumers number: {{ item.consumersNumber }}</span>
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>
            </a>
        </div>
    </div>

</section>
